<template lang="html">
  <div class="main-page" id="home-page">
    <!-- 主体内容 -->
     <div class="main-content has-main-tabbar">
       <nav-bar :title="'美家美货'" :hiddenLeft="true"/>
       <div class="home_page">
          <div class="page_top">
            <div class="top_bar">
              <div class="serach">请输入商品名称</div>
              <div class="message_icon"></div>
            </div>
            <div class="category">
              <van-tabs ref="category" v-model="active" :ellipsis="false" title-active-color="#E91F3F" title-inactive-color="#17273A" @click="clidsd">
                <van-tab :title="item.category_name" v-for="(item, k) in category" v-bind:key="k"></van-tab>
              </van-tabs>
              <span :class="show ? 'show' : '' " @click="downCategort"></span>
              <div class="cate_chaild" v-if="show">
                <div class="chaild_list">
                  <h3>全部分类</h3>
                  <span v-for="(item, k) in category" :class="active === k ? 'red' : ''" v-bind:key="k">{{item.category_name}}</span>
                </div>
                <div class="mask" @click="downCategort"></div>
              </div>
            </div>
          </div>
          <div class="page_main">
            <ad position="HOME1_BANNER" :height="375"></ad>
            <HomeNav></HomeNav>
            <ad position="HOME2_BANNER" :height="170"></ad>
            <Spike></Spike>
            <div class="index_list">
              <Item v-for="(item, k) in prdlist" :prd_item="item" :key="k"></Item>
            </div>
          </div>
       </div>
       <SwitchTab :active="active"></SwitchTab>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/global/nav-bar.vue'
import Ad from '@/components/global/ad.vue'
import Item from '@/components/global/prd_item.vue'
import HomeNav from '@/components/home/nav.vue'
import SwitchTab from '@/components/global/switch_bar.vue'
import Spike from '@/components/home/spike.vue'

export default {
  components: { NavBar, Ad, HomeNav, Spike, SwitchTab, Item },
  data () {
    return {
      active: 0,
      category: {},
      show: false,
      prdlist: {}
    }
  },
  created () {
    this.getCategory()
    this.gePrdList()
  },
  methods: {
    downCategort () {
      this.show = !this.show
    },
    getCategory () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'index_init', method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.category = resp.data.category_result
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    gePrdList () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'index_product', params: { category_id: '1071' }, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.prdlist = resp.data.data
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    clidsd (e) {
    }
  }
}
</script>
